<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link type="text/css" href="./sass/style.css" rel="stylesheet">
</head>

<body>
    <main>
        <section id="s1">
            <div>
                <p class="small-title">There you go</p>
                <hr>
                <h2 class="">clean & minimal template</h2>
                <button>discover more</button>
            </div>
        </section>
        <section id="s2">
            <div>
                <img src="./icons/up_fill.svg" id="up-icons">
                <h2>avalon</h2>
                <h3>creative <span>html</span> template</h3>
                <p>In general, gaps introduced by the gap properties are intended to act like an empty item/track/etc
                    with the gap’s size; in other words, an author should be able to reproduce the effects of gap by
                    just inserting additional empty items/tracks/etc into the container.</p>

                <div>
                    <img src="./icons/facebook_facebook52.svg">
                    <img src="./icons/twitter-fill-round.svg">
                    <img src="./icons/in.svg">
                    <img src="./icons/WiFi-Round.svg">
                    <img src="./icons/互联网.svg">
                </div>
            </div>
        </section>

        <section id="s3">
            <div>
                <img src="./icons/信封.svg">
                <p>best offer for you</p>
            </div>
        </section>

        <section id="s4">
            <div>
                <h2>modern web design</h2>
                <h3>Avalon Theme</h3>
                <p>Browsers do not provide any special information on background images to assistive technology. This is
                    important primarily for screen readers, as a screen reader will not announce its presence and
                    therefore convey nothing to its users. If the image contains information critical to understanding
                    the page's overall purpose, it is better to describe it semantically in the document.</p>
                <p>Browsers do not provide any special information on background images to assistive technology. This is
                    important primarily for screen readers, as a screen reader will not announce its presence and
                    therefore convey nothing to its users. If the image contains information critical to understanding
                    the page's overall purpose, it is better to describe it semantically in the document.</p>
                <ul>
                    <li>Create Beautiful Color Schemes that works</li>
                    <li>Create Beautiful Color Schemes that works</li>
                    <li>Create Beautiful Color Schemes that works</li>
                    <li>Create Beautiful Color Schemes that works</li>
                </ul>
                <button>discover more</button>
            </div>
            <img src="./images/3.webp">

        </section>
        <section id="s5">
            <section class="chapter">
                <button>show all</button>
                <button>design meeting</button>
                <button>app start up</button>
                <button>web conferences</button>
            </section>

            <section class="items">
                <div class="item">
                    <div class="day center">
                        <p>12</p>
                        <p>MAY</p>
                    </div>
                    <div class="world">
                        <p class="main-world">four loko franzen</p>
                        <p class="side-world">web conferences</p>
                    </div>
                    <div class="time">
                        <p>8:00AM - 11:00AM</p>
                        <p>Saturday</p>
                    </div>
                    <div class="choose">
                        <button>I AM INTERSTED</button>
                    </div>
                </div>

                <div class="item">
                    <div class="day center">
                        <p>12</p>
                        <p>MAY</p>
                    </div>
                    <div class="world">
                        <p class="main-world">four loko franzen</p>
                        <p class="side-world">web conferences</p>
                    </div>
                    <div class="time">
                        <p>8:00AM - 11:00AM</p>
                        <p>Saturday</p>
                    </div>
                    <div class="choose">
                        <button>I AM INTERSTED</button>
                    </div>
                </div>

                <div class="item">
                    <div class="day">
                        <p>12</p>
                        <p>MAY</p>
                    </div>
                    <div class="world">
                        <p class="main-world">four loko franzen</p>
                        <p class="side-world">web conferences</p>
                    </div>
                    <div class="time">
                        <p>8:00AM - 11:00AM</p>
                        <p>Saturday</p>
                    </div>
                    <div class="choose">
                        <button>I AM INTERSTED</button>
                    </div>
                </div>

                <div class="item">
                    <div class="day">
                        <p>12</p>
                        <p>MAY</p>
                    </div>
                    <div class="world">
                        <p class="main-world">four loko franzen</p>
                        <p class="side-world">web conferences</p>
                    </div>
                    <div class="time">
                        <p>8:00AM - 11:00AM</p>
                        <p>Saturday</p>
                    </div>
                    <div class="choose">
                        <button>I AM INTERSTED</button>
                    </div>
                </div>

                <div class="item ">
                    <div class="day">
                        <p>12</p>
                        <p>MAY</p>
                    </div>
                    <div class="world">
                        <p class="main-world">four loko franzen</p>
                        <p class="side-world">web conferences</p>
                    </div>
                    <div class="time">
                        <p>8:00AM - 11:00AM</p>
                        <p>Saturday</p>
                    </div>
                    <div class="choose">
                        <button>I AM INTERSTED</button>
                    </div>
                </div>
            </section>
        </section>

        <section id="s6">

        </section>

        <section id="s7">
            <img src="./images/6.jpeg">
            <p>web designer</p>
            <p>william smith</p>
            <p>Browsers do not provide any special information on background images to assistive technology. This is
                important primarily for screen readers, as a screen reader will not announce its presence and
                therefore convey nothing to its users. </p>
            <div class="three-dot">
                <div class="dot"></div>
                <div class="dot dot-active"></div>
                <div class="dot"></div>
            </div>
        </section>

        <section id="s8">
            <div>
                <img src="./icons/爱心.svg">
                <p>aliquam finibus est</p>
            </div>
            <div>
                <img src="./icons/房子.svg">
                <p>aliquam finibus est</p>
            </div>
            <div>
                <img src="./icons/左箭头.svg">
                <p>aliquam finibus est</p>
            </div>
            <div>
                <img src="./icons/iconfont-icon (5).svg">
                <p>aliquam finibus est</p>
            </div>
        </section>
        <section id="s9">
            <div>
                <input placeholder="You name...">
                <input placeholder="Your email...">
                <input placeholder="Subject...">
                <textarea>
                    
                </textarea>
                <button>send it now</button> 
            </div>
        </section>

        <section id="s10">
            <img src="./icons/爱心.svg">
            <p>aliquam finibus est</p>
        </section>

        <section id="s11">
            <p>Copyright 2018 Your company- <span>Avaion</span> by <span>HTML5 Max</span></p>
        </section>
    </main>
</body>

</html>